<!--
 * @Date: 2022-03-25 15:42:43
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-03-26 14:07:15
 * @FilePath: \vue3Components\src\views\trend.vue
 * @Description: something
-->
<template>
  <el-divider>默认</el-divider>
  <div class="box">
    <div>
      <trend text="营业额"></trend>
    </div>
    <div>
      <trend text="销售额" type="down"></trend>
    </div>
  </div>
  <el-divider>反转颜色</el-divider>
  <div class="box">
    <div>
      <trend text="营业额" reverseColor></trend>
    </div>
    <div>
      <trend text="销售额" type="down" reverseColor></trend>
    </div>
  </div>
  <el-divider>自定义图标颜色</el-divider>
  <div class="box">
    <div>
      <trend text="营业额" upIconColor="blue"></trend>
    </div>
    <div>
      <trend text="销售额" type="down" downIconColor="#409eff"></trend>
    </div>
  </div>
  <el-divider>自定文字颜色</el-divider>
  <div class="box">
    <div>
      <trend text="营业额" upTextColor="red"></trend>
    </div>
    <div>
      <trend text="销售额" type="down" downTextColor="green"></trend>
    </div>
  </div>
  <el-divider>自定图标</el-divider>
  <div class="box">
    <div>
      <trend text="营业额" upIcon="CaretTop"></trend>
    </div>
    <div>
      <trend text="销售额" type="down" downIcon="CaretBottom"></trend>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import trend from '../components/trend/Trend.vue'

</script>
<style lang='less' scoped>
.box {
  display: flex;
  height: 100px;
  div {
    margin-right: 10px;
  }
}
</style>
